<template>
    <div class="item-utils">
        <div class="left">
            <figure v-for="(item, index) in info.users">
                <router-link to="#">
                    <img :src="item.avatar" alt="">
                </router-link>
            </figure>
            <p class="likes-count">{{info.count}} 赞</p>
        </div>
        <div class="right">
            <div class="isLike">
                <span class="iconfont " :class="info.isLike? 'icon-like1' : 'icon-like' " @click="changeLike"></span>
            </div>
            <div class="comment">
                <router-link to="#">
                    <span class="iconfont icon-round_comment_light"></span>
                </router-link>
            </div>
            <div class="share">
                <span class="iconfont icon-share"></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        // data () {
        //     return {

        //     }
        // },
        props: {
            info: {
                type: Object
            }
        },
        methods: {
            changeLike() {
                this.info.isLike = !this.info.isLike
            }
        }
    }
</script>

<style scoped>
    .item-utils {
        display: flex;
        justify-content: space-between;

        padding: 0 15px;
        line-height: 30px;
    }
    .left figure {
        margin: 0 3px 0 0;
        padding: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        overflow: hidden;
    }
    .left figure img {
        width: 100%;
    }
    .likes-count {
        margin: 0;
        font-size: 13px;
        color: #999;
        margin-left: 5px;
    }

    .right {
        display: flex;
        justify-content: space-around;
    }
    .right > div {
        margin-left: 15px;
    }
    .icon-like1 {
        color: #f44;
    }
</style>